<!--

    Copyright (c) 2015-2018 Red Hat, Inc.
    This program and the accompanying materials are made
    available under the terms of the Eclipse Public License 2.0
    which is available at https://www.eclipse.org/legal/epl-2.0/

    SPDX-License-Identifier: EPL-2.0

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<che-toolbar che-title="Stacks" border-none></che-toolbar>
<che-description ng-show="listStacksController.pluginRegistryUrl"
                 che-link-title="{{listStacksController.pluginRegistryUrl}}."
                 che-link="{{listStacksController.pluginRegistryUrl}}">
  A stack is environment configuration for workspace. Current stack registry is</che-description>
<md-content md-scroll-y flex layout="column" md-theme="maincontent-theme" class=stacks-list-content>
  <md-progress-linear md-mode="indeterminate" class="stacks-list-progress"
                      ng-show="listStacksController.isLoading"></md-progress-linear>
  <che-list-header che-input-placeholder="Search"
                   che-search-model="listStacksController.stackFilter.name"
                   che-on-search-change="listStacksController.onSearchChanged(str)"
                   che-hide-delete="true">
    <div flex="100"
         layout="row" layout-align="start stretch"
         class="che-list-item-row">
      <div flex layout="row"
           layout-align="start center"
           class="che-list-item-details">
        <che-list-header-column class="devfile-selector-icon-column"
                                che-column-title=""></che-list-header-column>
        <che-list-header-column flex="25"
                                che-sort-value="listStacksController.orderBy"
                                che-sort-item="displayName"
                                che-column-title="Name"></che-list-header-column>
        <che-list-header-column flex="50"
                                che-sort-value="listStacksController.orderBy"
                                che-sort-item="description"
                                che-column-title="Description"></che-list-header-column>
        <che-list-header-column flex="10"
                                che-sort-value="listStacksController.orderBy"
                                che-sort-item="globalMemoryLimit"
                                che-column-title="Required memory"></che-list-header-column>
      </div>
    </div>
  </che-list-header>
  <che-list class="stack-list">
    <div ng-repeat="devfile in listStacksController.cheListHelper.getVisibleItems() | orderBy:listStacksController.orderBy">
      <che-list-item flex ng-click="listStacksController.onDevfileSelected(devfile)">
        <div flex="100"
             layout="row"
             layout-align="start stretch"
             class="che-list-item-row">
          <div flex layout="row" layout-align="start center">
            <!-- Icon -->
            <div class="devfile-selector-icon-column"
                 layout="column" layout-align="center center">
              <div ng-if="devfile.icon" class="devfile-selector-item-icon">
                <img ng-src="{{devfile.icon}}"/>
              </div>
              <div ng-if="!devfile.icon" class="devfile-selector-item-icon blank-icon">
                <div class="chefont cheico-type-blank"></div>
              </div>
            </div>
            <!-- Name -->
            <div flex="25">
              <span class="che-list-item-name">{{devfile.displayName}}</span>
            </div>
            <!-- Description -->
            <div flex="50">
              <span class="che-list-item-secondary">{{devfile.description}}</span>
            </div>
            <!-- Memory -->
            <div flex="10">
              <span class="che-list-item-secondary">{{devfile.globalMemoryLimit}}</span>
            </div>
          </div>
        </div>
      </che-list-item>
    </div>
  </che-list>
  <div class="che-list-empty">
    <span ng-show="listStacksController.cheListHelper.visibleItemsNumber === 0">There are no stacks.</span>
  </div>
</md-content>
